<!-- 用户列表 -->
<template>
    <div class="user-list">
        <!-- 面包屑导航栏 -->
        <Breadcrumb />
        <!-- 筛选搜索 -->
        <FilterSearch>
            <template #s1>
                <span>账号/姓名:</span>
                <el-input v-model="keyword" placeholder="订单编号" />

            </template>
        </FilterSearch>
        <!-- 数据列表 -->
        <DataList>
            <template #addbtn>
                <el-button class="button" text>添加</el-button>
            </template>
        </DataList>

        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%" class-name="table" border>
            <el-table-column prop="id" label="编号" width="60" align='center' />
            <el-table-column prop="username" label="账号" width="280" align='center' />
            <el-table-column prop="nickName" label="姓名" align='center' />
            <el-table-column prop="email" label="邮箱" align='center' />
            <el-table-column label="添加时间" align='center'>
                <template #default="scope">
                    {{ formatDate(scope.row.createTime) }}
                </template>
            </el-table-column>
            <el-table-column label="最后登录" align='center'>
                <template #default="scope">
                    {{ formatDate(scope.row.loginTime) }}
                </template>
            </el-table-column>
            <el-table-column label="是否启用" align='center'>
                <!-- #default=“scope”作用域插槽 通过scope.row拿到每个item的数据对象,也就是行对象;而在#default=“scope”中再加入的具名插槽其实针对的是列集合里的元素也就是列元素;那么每个列集合都有了自己的插槽,其实相当于每个列元素都有了自己的插槽，之后就可以根据名字插入自定义内容了 -->
                <template #default="scope">
                    <el-switch size="default" v-model="scope.row.status" :active-value="1" :inactive-value="0" />
                </template>
            </el-table-column>
            <el-table-column prop="operate" label="操作" align='center'>
                <!-- 从scope中将row解构出来 -->
                <template #default="{ row }">
                    <el-button size="small">分配角色</el-button>
                    <el-button size="small" @click="editFn(row)">编辑
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination v-model:currentPage="pageData.currentPage" v-model:page-size="pageData.pageSize"
            :page-sizes="[10, 50, 100, 200]" :small="true" layout="total, sizes, prev, pager, next, jumper"
            :total="pageData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

        <!-- 编辑弹框 -->
        <adminEdit :isShowEditForm='isShowEditForm' @closeEditForm='closeEditForm'
            :curEditAdminData='curEditAdminData' />
    </div>

</template>

<script lang='ts' setup>
import { reactive, toRefs, ref, onUpdated, toRef, Ref } from 'vue'
import DataList from '@/components/dataList.vue';
import Breadcrumb from '@/components/breadcrumb.vue';
import FilterSearch from '@/components/filterSearch.vue';
import { formatDate } from "@/utils/formatDate"
import { useTable } from "@/components/useTable";
import * as http from '@/request/http';
import adminEdit from "@/views/ums/component/adminEdit.vue";
/* 
    △传递ref参数
    keyword是ref()构造返回的一个ref对象 是引用类型 所以是响应式的 如果传递的参数为keyword.value，那么是值类型的，无法与更新的数据同步，只能获取初始值，因此传递keyword对象，但是后台需要的参数是值类型的，因此在封装到useTable中，将这个对象的值提取出来

*/
const keyword = ref('')
const { tableData, pageData, handleSizeChange, handleCurrentChange, fetchData } = useTable(http.admin.getAdminListApi, { keyword: keyword })

let isShowEditForm = ref(false);
let curEditAdminData = ref({} as IGetAdminListListItem)
function editFn(row: IGetAdminListListItem) {
    isShowEditForm.value = true;
    // 传递的是一个对象 引用类型的数据 因此会是响应式的
    curEditAdminData.value = row;
}
function closeEditForm() {
    isShowEditForm.value = false;
}

</script>
<style lang='scss' scoped>
.user-list {
    padding: 0 20px;
    box-sizing: border-box;

    .button {
        background-color: #409eff;
        color: white;
    }

    :deep(.el-button--small) {
        color: #409eff;
        border: none;
    }

    .table {
        margin-top: 20px;
    }
}

// 分页器样式
.el-pagination {
    justify-content: flex-end;
}
</style>